<template>
	<view>
		<!--背景 开始-->
		<view class="album_bg">
			<image mode="widthFix" :src="album.url"></image>
			<view class="album_info">
				<view class="album_name">{{album.name}}</view>
				<view class="album_btn">关注专辑</view>
			</view>
		</view>
		<!--背景 结束-->
		<!-- 作者信息 开始-->
		<view class="album_user">
			<view class="album_atr"></view>
		</view>
		<!-- 作者信息结束-->
		<!--列表开始-->
		<view class="album_list">
			<view class="album_item" v-for="item in albums" :key="item.id">
				<image :src="item.url" mode="widthFix"></image>
			</view>
		</view>
		<!--列表结束-->

		<!--收藏点赞开始-->
		<view class="button">
			<view class="iconfont icon-shoucang">
				<text>收藏</text>
			</view>
			<view class="iconfont icon-dianzan">
				<text>{{article.likes}}</text>
			</view>
		</view>
		<!--收藏点赞结束-->
		<!-- 下载按钮-->
		<view v-if="article.isDownLoad" class="download" @click="handleDownload">
			<view class="download_btn">下载(分享)绘本</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					limit: 30,
					order: "new",
					skip: 0,
					first: 1
				},
				id: -1,
				album: {},
				albums: [],
				like: 209,
				article: {}
			}
		},
		onLoad(opentions) {
			this.id = opentions.id;
			// this.id = "23"
			this.getList()
		},
		methods: {
			getList() {
				this.request({
						url: this.httpServer + `/v1/app/article/${this.id}`,
						data: this.params
					})
					.then(res => {
						this.album = res.data.apMaterials[0];
						res.data.apMaterials.shift()
						this.albums = res.data.apMaterials;
						this.article = res.data
					})
			},
			/**下载文件*/
			async handleDownload() {
				await uni.showToast({
					title: "绘本为pdf文件打开后可以分享给好友"
				})
				//将远程文件下载小程序内存中
				const res = await uni.downloadFile({
					url: this.article.apDownload.url
				});
				const {
					tempFilePath
				} = res[1];
				const res2 = await uni.openDocument({
					filePath: tempFilePath,
					showMenu: true
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.album_bg {
		position: relative;

		image {}

		.album_info {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			/*两侧*/
			height: 80rpx;
			align-items: center;
			color: #FFF;
			padding: 0 10rpx;

			.album_name {
				font-size: 40rpx;
			}

			.album_btn {
				background-color: $uni-color-error;
				width: 152rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
			}
		}

	}

	.button {
		display: flex;
		height: 80rpx;
		padding: 10rpx;
		border-bottom: 5rpx solid #eee;
		align-content: center;

		.icon-shoucang {
			flex: 1;
			display: flex;
			justify-content: center;
			align-content: center;
			font-size: 40rpx;

			text {
				font-size: 30rpx;
			}

		}

		.icon-dianzan {
			flex: 1;
			display: flex;
			justify-content: center;
			align-content: center;
			font-size: 40rpx;

			text {
				font-size: 30rpx;
			}
		}
	}

	.download {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.download_btn {
			width: 95%;
			height: 60%;
			background-color: $uni-color-error;
			color: #FFF;
			font-size: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}
	}
</style>
